<template>
  <el-checkbox-group v-model="code">
    <div v-for="(item, index) in xxarryL" :key="item" class="xx">
      <el-checkbox :label="item">
        {{ item }}:
        <el-input v-model="options[index].title"></el-input>
      </el-checkbox>
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :http-request="upimg"
        @click.native="scimg(index)"
      >
        <img
          v-if="options[index].img"
          :src="options[index].img"
          class="avatar"
        />
        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
        <span class="img" v-else>上传图片</span>
      </el-upload>
    </div>
  </el-checkbox-group>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      xxarryL: ['A', 'B', 'C', 'D'], // 选项数组
      code: [],
      options: [
        {
          code: '', // 选项
          title: '', // 内容
          img: '', // 图片URL
          isRight: '' // 是否正确答案
        }
      ], // 选项
      isE: true,
      scitem: 0 // 点击的选项
    }
  },
  watch: {
    // isE: {
    //   handler () {
    //     if (!this.isE) {
    //       this.options = this.xxsj
    //     }
    //   },
    //   deep: true
    // },
    options: {
      handler () {
        this.xiugai()
      },
      immediate: true,
      deep: true
    },
    code: {
      handler () {
        this.options.forEach((item) => {
          if (item.isRight) {
            item.isRight = false
          }
          if (this.code.includes(item.code)) {
            item.isRight = true
          }
        })
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.xxSZ()
  },
  computed: {},
  methods: {
    xxSZ () {
      const arr = []
      this.xxarryL.forEach((item) => {
        arr.push({ code: item, title: '', img: '', isRight: false })
      })
      this.options = arr
      console.log(arr, 5565565656)
    },
    xiugai () {
      const arr = []
      if (!this.isE) {
        this.options.forEach((item) => {
          arr.push(item.code)
          if (item.isRight) {
            this.code.push(item.code)
          }
        })
        this.xxarryL = arr
      }
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    upimg (file) {
      // console.log(file, 45555)
      if (file.file) {
        var COS = require('cos-js-sdk-v5')

        // SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
        var cos = new COS({
          SecretId: 'AKIDMbgaIm5C5lEWdmaEhxznOlvra5NRHvNc',
          SecretKey: '2oMfjX5NQDl37vTmrkQs7AzaBNL5cw4y'
        })
        cos.putObject(
          {
            Bucket: 'web70rz-1309642974' /* 必须 */,
            Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
            Key: file.file.name /* 必须 */,
            StorageClass: 'STANDARD',
            Body: file.file, // 上传文件对象
            onProgress: function (progressData) {
              console.log(JSON.stringify(progressData))
            }
          },
          (err, data) => {
            console.log(err || data)
            // console.log(data.Location, 5655665)
            this.options[this.scitem].img = 'http://' + data.Location
            // console.log(this.img, 888888888888888888888888888888)
            this.tpdata()
            // console.log(this.arr, 555)
          }
        )
      }
    },
    scimg (item) {
      this.scitem = item
      // console.log(this.scitem, item, 999999)
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  width: 100px;
  height: 60px;
  display: block;
  margin-left: 20px;
  // width: 100px;
  // height: 60px;
  // display: inline-block;
}
::v-deep .el-upload {
  // border: 1px dashed #d9d9d9;
  width: 100px;
  height: 60px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar {
  width: 100px;
  height: 60px;
}
.img {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #000;
}
.xx {
  display: flex;
  line-height: 60px;
  margin-bottom: 30px;
}
</style>
